<template>
  <div>
    <h2>搜索页面</h2>
    <!-- 按钮操作区 -->
    <Operation></Operation>

    <!-- 数据信息区 -->
    <span v-show="!isLoading">
      <el-tooltip
        class="item"
        effect="dark"
        content="点击此处跳转到设置中进行修改"
        placement="top-start"
      >
        <i class="header-icon el-icon-info" @click="handleIconClick"></i>
      </el-tooltip>
      <b
        >当前行数：{{ pageSize }} 行/页&nbsp;&nbsp;&nbsp; 共:
        {{ dataList.length }} 行</b
      >
    </span>

    <!-- 数据列表 -->
    <el-table
      :data="
        dataList.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      :border="true"
      v-show="!isLoading"
    >
      <el-table-column type="index" label="序号" width="50"> </el-table-column>
      <el-table-column prop="title" label="标题" width="530" align="center">
      </el-table-column>
      <el-table-column
        prop="author"
        label="作者"
        width="120"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="状态" width="100" :sortable="true">
        <template slot-scope="scope"
          ><el-tag v-if="scope.row.state == 1" type="primary">未提取</el-tag
          ><el-tag v-else-if="scope.row.state == 2" type="warning"
            >准备提取</el-tag
          >
          <el-tag v-else-if="scope.row.state == 3" type="warning"
            >正在下载</el-tag
          >
          <el-tag v-else-if="scope.row.state == 4" type="success"
            >已保存</el-tag
          >
          <el-tag v-else type="danger">错误</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.state == 1"
            type="primary"
            @click="handleChangeState(scope)"
            >提取 <i class=""></i
          ></el-button>
          <el-button
            v-else-if="scope.row.state == 2"
            type="warning"
            @click="handleChangeState(scope)"
            >取消<i class=""></i
          ></el-button>
          <el-button
            v-else-if="scope.row.state == 4"
            v-show="false"
          ></el-button> </template
      ></el-table-column>
    </el-table>
    <!-- 正在加载时显示 -->
    <div class="Loading" v-if="isLoading">
      <el-card>正在加载，请稍等...</el-card>
      <el-table empty-text=" " v-loading="true" :height="300"></el-table>
    </div>

    <!-- 分页 -->
    <Pagination />
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
import Operation from "./Operation.vue"; // 按钮操作区
import Pagination from "./Pagination.vue"; //分页

import stateCode from "@/js/stateCode";

export default {
  name: "Search",
  components: { Pagination, Operation },
  data() {
    return {
      textarea: "", // 文本框中出现内容
    };
  },
  computed: {
    ...mapState(["dataList"]),
    ...mapState("search", ["textList", "currentPage", "pageSize", "isLoading"]),
    ...mapGetters("search", ["displayList"]),
  },
  methods: {
    ...mapMutations("search", []),

    // 按下提取按钮
    handleChangeState(scope) {
      let id = scope.row.PMCID;
      let nowState = scope.row.state;

      if (nowState == stateCode("未提取")) {
        this.$store.commit("UPDATESTATE", {
          PMCID: id,
          state: stateCode("准备提取"),
        });
      }
      if (nowState == stateCode("准备提取")) {
        this.$store.commit("UPDATESTATE", {
          PMCID: id,
          state: stateCode("未提取"),
        });
      }
    },

    // 按下图标
    handleIconClick(){
      this.$router.push('/settings');
    }
  },
};
</script>

<style>
/* 面包屑导航 */
.el-breadcrumb {
  margin-bottom: 10px;
}

/* 加载 */
.Loading {
  text-align: center;
}
.Loading > .el-table {
  text-align: center;
}
.Loading > .el-card {
  font-family: "Helvetica Neue";
  font-size: 20px;
  color: blue;
}
</style>